<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 题库</title>
    <meta name="keywords" content="">
    <meta name="description" content="">


    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/wode.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-head1">
                    <img src="img/111.jpg">
                    <div class="uname">小三说我帅</div>
                    <div class="signature">我最帅我最帅我最帅</div>
                    <div class="wode-list">
                        <div class="pull-left wode-list-block">
                            <div class="title">做题</div>
                            <div class="content">444444</div>
                        </div>
                        <div class="pull-left wode-list-block">
                            <div class="title">做题</div>
                            <div class="content">44444</div>
                        </div>
                        <div class="pull-left wode-list-block">
                            <div class="title">做题</div>
                            <div class="content">4444</div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="space-25"></div>
                <div class ="ibox-list">
                    <div class="wode-element on">
                        <a href="mailbox.html">
                            <i class="fa fa-inbox "></i> <span class="title">我的报告</span>
                            <div class="label label-warning pull-right xhd"></div>
                        </a>
                    </div>

                    <div class="wode-element on">
                        <a href="mailbox.html">
                            <i class="fa fa-inbox "></i> <span class="title">错题集</span>
                            <span class=" label label-warning pull-right xhd">16</span>
                        </a>
                    </div>
                    <div class="wode-element">
                        <a href="mailbox.html">
                            <i class="fa fa-inbox "></i> <span class="title">笔记</span>
                            <span class=" label label-warning pull-right xhd">16</span>
                        </a>
                    </div>
                    <div class="wode-element">
                        <a href="mailbox.html">
                            <i class="fa fa-inbox "></i> <span class="title">未完成</span>
                            <div class="label label-warning pull-right xhd">16</div>
                        </a>
                    </div>

                </div>
            </div>
        </div>


        <div class="col-sm-9 animated fadeInRight">

            <div class="row">
                <div class="col-sm-12">
                    <p>ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
                        <a href="http://echarts.baidu.com/doc/about.html" target="_blank">了解更多</a></p>
                    <p>ECharts官网：<a href="http://echarts.baidu.com/" target="_blank">http://echarts.baidu.com/</a></p>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3">
                    <div class="ibox">
                        <div class="ibox-content">
                            <h5>做题</h5>
                            <h1 class="no-margins">1000道</h1>
                            <!--<div class="stat-percent font-bold text-navy pull-right">98% <i class="fa fa-bolt"></i></div>
                            <small>占比</small>-->
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="ibox">
                        <div class="ibox-content">
                            <h5>错误</h5>
                            <h1 class="no-margins">1000道</h1>
                            <div class="font-bold text-danger pull-right">98% <i class="fa fa-bolt"></i></div>
                            <small>错误率</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                    <!--    <div class="ibox-title">
                            <h5>饼状图</h5>
                        </div>-->
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-pie-chart"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox">
                        <div class="ibox-content">
                            <h5>所属章节列表</h5>
                            <table class="table table-stripped small m-t-md">
                                <thead>
                                <tr>

                                    <td class="no-borders">
                                      <!--  <i class="fa fa-circle text-navy"></i>-->
                                    </td>
                                    <td class="no-borders">
                                        所属章节
                                    </td>
                                    <td class="no-borders">
                                        共做
                                    </td>
                                    <td class="no-borders">
                                        答错
                                    </td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="no-borders">
                                        <i class="fa fa-circle text-navy"></i>
                                    </td>
                                    <td class="no-borders">
                                        系统的可靠性分析与设计
                                    </td>
                                    <td class="no-borders">
                                        110
                                    </td>
                                    <td class="no-borders">
                                        20
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>

<!-- ECharts -->
<script src="js/plugins/echarts/echarts-all.js"></script>



<script>
    $(document).ready(function () {
        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        var pieoption = {
            title : {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
         /*   legend: {
                orient : 'vertical',
                x : 'left',
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },*/
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }
            ]
        };
        pieChart.setOption(pieoption);
        $(window).resize(pieChart.resize);
    });
</script>

</body>

</html>
